<template>
    <div class="storeInfo">
        <div class="head">  
            <p class="headtxt">推荐特殊规则设置</p>                        
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" 
            tooltip-effect="dark">
                <el-table-column prop="recommend_id" label="id" fixed width="50"></el-table-column>
                <el-table-column prop="items" label="答案" width="50">
                    <template slot-scope="scope">
                        <p>{{scope.row.answer_1}}、{{scope.row.answer_2}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="推荐大标题" width="200"></el-table-column>



                <el-table-column prop="" label="推荐套餐类型设定">
                    <template slot-scope="scope">
                        <div v-for="(ritem,r) in scope.row.rcate_data" :key="r" class="remmtype" style="text-align:left">
                            <p>
                                <span style="color:red">{{ritem.title}}:</span>   
                                <span>{{ritem.category_name}}套餐(男:{{ritem.man}}  女:{{ritem.woman}})</span>
                            </p>
                            <p>推荐语：以前都是陪客户喝洋酒，我才想起来很少跟朋友喝洋酒</p>
                            <p>三挡套餐：
                                <el-button type="warning" icon="el-icon-edit" circle @click="theClicklevel(ritem.rcate_id)"></el-button>
                                <el-button type="danger" icon="el-icon-document-copy" circle @click="rcate_id = ritem.rcate_id "></el-button>
                            </p>
                            <div class="threeitem" v-for="(citem,c) in ritem.combos" :key="c">
                                <p>
                                    <span>{{c+1}}.</span>
                                    <span v-if='c==0'>基准套餐:</span>  
                                    <span v-else-if='c==1'>数量升级:</span>  
                                    <span v-else-if='c==2'>品位升级:</span>  
                                    <span>{{citem.man.sex_cn}}:{{citem.man.item_name}}[M]*{{citem.man.average_capacity}}+{{citem.man.plus_capacity}}  {{citem.woman.sex_cn}}:{{citem.woman.item_name}}[F]*{{citem.woman.average_capacity}}+{{citem.woman.plus_capacity}} </span>
                                </p>
                            </div>
                        </div>
                    </template>
                </el-table-column>




                <el-table-column prop="update_time" label="更新时间"  width="100"></el-table-column>
                <el-table-column prop="" label="操作" width="100">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(scope.row,item.url)">
                            <i>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>          
                </el-table-column>
            </el-table>                        
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
  

        <!-- 编辑的小图标显示的弹框 -->
        <!-- <el-dialog title="" :visible.sync="editicon_show"> -->
        <el-dialog :title="'首选类型：'+editiconInfo.category_name" :visible.sync="editicon_show">
            <el-form class="comboeditbox">
                <p class="comboedit_head disflex">
                    <el-button class="addbutton" round type="primary" size="small" @click="paste">粘贴</el-button>  
                </p>
                <div class="editiconbox" v-for="(rcate,r) in editiconInfo.combos" :key="r">
                    <p class="combolevel" v-if="r == 0">套餐一：首选套餐</p>
                    <p class="combolevel" v-else-if="r == 1">套餐二：数量升级</p>
                    <p class="combolevel" v-else-if="r == 2">套餐三：品位升级</p>
                    <p class="salesp">销量：<input type="text" v-model="rcate.man.sales_num"> 点赞数：<input type="text" v-model="rcate.man.praise_rate" ></p>
                    <div class="disflex">
                        <p class="sexp">男</p>
                        <ul class="ulbox">
                            <li v-for="(manitem,m) in rcate.man.items" :key="m">
                                <div class="disflex lidiv">
                                    <p>
                                        <!-- <input type="text" placeholder="按照名称搜索" v-model="manitem.item_name"> -->
                                        <goodsBox :default_txt="manitem.item_name" :input_url="goodsearchurl" :id="r+ '-'+m +'-man'" v-on:getsearchItemGood="itemname"></goodsBox>
                                    </p> 
                                    <p><input type="text" placeholder="平均酒量"  v-model="manitem.average_capacity"></p> 
                                    <p><input type="text" placeholder="整体加量" v-model="manitem.plus_capacity"></p> 
                                    <p class="disflex combooparete">
                                        <span @click="updown(r+ '-'+m +'-man','up')">↑</span>
                                        <span @click="updown(r+ '-'+m +'-man','down')">↓</span>
                                        <span @click="updown(r+ '-'+m +'-man','minus')">-</span>
                                        <span @click="updown(r+ '-'+m +'-man','plus')">+</span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="disflex">
                        <p class="sexp">女</p>
                        <ul class="ulbox">
                            <li v-for="(womanitem,w) in rcate.woman.items" :key="w">
                                <div class="disflex lidiv">
                                    <p><goodsBox :default_txt="womanitem.item_name" :input_url="goodsearchurl" :id="r+ '-'+w +'-woman'" v-on:getsearchItemGood="itemname"></goodsBox></p> 
                                    <p><input type="text" placeholder="平均酒量"  v-model="womanitem.average_capacity"></p> 
                                    <p><input type="text" placeholder="整体加量" v-model="womanitem.plus_capacity"></p> 
                                    <p class="disflex combooparete">
                                        <span @click="updown(r+ '-'+w +'-woman','up')">↑</span>
                                        <span @click="updown(r+ '-'+w +'-woman','down')">↓</span>
                                        <span @click="updown(r+ '-'+w +'-woman','minus')">-</span>
                                        <span @click="updown(r+ '-'+w +'-woman','plus')">+</span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>    
                    
                </div>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editicon_show = false">取 消</el-button>
                <el-button type="primary" @click="eiditiconyes">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 修改字样点击显示的弹框 -->
        <el-dialog title="修改分类" :visible.sync="editTxt_if_show">
            <el-form class="comboeditTxtbox">
                <p class="comboedit_head disflex editTxtP">
                    <span>
                        问题一答案：{{editTxtData.answer_1}}<br /> 
                        问题二答案：{{editTxtData.answer_2}}
                    </span>
                    <el-button class="addbutton" round type="primary" size="small" @click="pasteTxt(editTxtData.recommend_id)">粘贴</el-button>  
                </p>
                <el-form-item class="thiTips" label="推荐大标题" :label-width="editW">
                    <el-input v-model="editTxtData.title"></el-input>
                </el-form-item>  
                <div class="editTxtbox" v-for="(rcateList,rl) in editTxtData.rcate_list" :key="rl">
                    <el-form-item class="twoInput" :label="rcateList.title+'类型'" :label-width="editW">
                        <el-select class="cateSel" clearable v-model="rcateList.category_id" placeholder="套餐类型">
                            <el-option v-for="item in cateList" :key="item.cate_name" :label="item.cate_name"
                                :value="item.category_id"></el-option>
                        </el-select>
                        <el-input class="sortInput" v-model="rcateList.sort" placeholder="套餐排序值"></el-input>
                    </el-form-item>  
                    <el-form-item class="oneInput" :label="rcateList.title+'推荐语'" :label-width="editW">
                        <el-input class="sortInput" v-model="rcateList.intro" placeholder="推荐语"></el-input>
                    </el-form-item>
                    <el-form-item class="twoInput" label="男女推荐" :label-width="editW">
                        
                        <el-input class="sortInput noMarLeft" v-model="rcateList.man" placeholder="男推荐描述"></el-input>
                        <el-input class="sortInput" v-model="rcateList.woman" placeholder="女推荐描述"></el-input>
                    </el-form-item>  
                    
                </div>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editTxt_if_show = false">取 消</el-button>
                <el-button type="primary" @click="editTxt_ifShowFn_yes">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>
<style lang="scss">
.remmtype .el-button.is-circle{padding:5px}
.comboeditbox .el-input__inner{
    width: 132px;
    height: 30px;
    border: 1px solid #dcdfe6;
    padding:0 5px;
}
.comboeditTxtbox{
    .twoInput{
        .el-form-item__content{
            display: flex;
            flex-direction:row;
            justify-content:space-between;
            .el-select{
                width:640px;
            }
        }    
    }
    .el-form-item{
        margin-bottom:5px;
    }
    
}
</style>
<style lang="scss" scoped>

    .editiconbox{
        padding:0 10px;
    }
    .combolevel{
        color:indianred;
        margin: 10px 0;
    }
    p.comboedit_head{
        margin:10px;
        justify-content: flex-end;
    }
    p.editTxtP{
        justify-content: space-between;
    }
    .disflex{
        display: flex;
        justify-content:space-between;
        
    }
    .combotabhead{
        width: 540px;
        text-align: center;
        height: 26px;
        line-height: 26px;
        box-shadow: 0px 0px 10px #bbb;
        margin: 5px 0 5px 40px;
        span{
            width: 120px;
            text-align: center;
            color:#ccc;
        }
    }
    .ulbox{
        width:540px;
        justify-content: space-between;
        margin: 5px 0;
        .lidiv{
            input{
                width: 120px;
                height: 30px;
                border: 1px solid #dcdfe6;
                padding:0 5px;
                border-radius: 4px;
            }
            .combooparete{
                width: 100px;
                line-height: 32px;
                font-size: 16px;
                cursor: pointer;
                color:hotpink
            }
        }
    }
    .salesp{
        margin: 10px 0;
        input{
            width: 120px;
            height: 30px;
            border: 1px solid #dcdfe6;
            padding:0 5px; 
            border-radius:4px;
        }
    }
    .sexp{
        line-height: 42px;
        text-align: center;
        width:36px;
    }


.shortinput{width: 100px;margin: 0 5px}
.headtxt{height: 40px;line-height: 40px;width: 100%;padding-left: 20px;box-sizing: border-box;background: #fff}
.remmtype{
    .threeitem{
        padding-left:10px;
    }
}
.comboeditTxtbox{
    .thiTips{
        margin-bottom:20px;
        padding:5px;
    }
} 
.editTxtbox{
    margin-bottom:20px;
    .twoInput{
        .sortInput{
            margin-left:10px;
        }
        .noMarLeft{
            margin-left: 0px;
        }
    }
}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js';
import goodslist from '../../pop/goodslist.vue'
export default {
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            add_edit_show:false,//编辑、添加弹框的显示开关            
            pageNum:1,//page
            limitList:[],//权限的存储数组
            editW:'120px',
            editForm:{
                holiday:'',//平日/周末
                charmber_id:'',//房型
                period_id:'',//档位
                items_price:'',//酒水价格
                reduce_price:'',//减免价格
                
            },//编辑弹框内需要的数据
            limitList_str:'',
            trList:[],//弹框内添加商品和相关数据的数组
            goodsearchurl:potUrl.ritemssearch,//搜索商品
            params:{},//编辑确定接口传递的数据
            rcate_id:'',//记录复制的'三级'套餐id
            editicon_show:false,//eidt icon 弹框显示的开关
            editiconInfo:{},//点击编辑弹框时赋予值的变量
            editTxt_if_show:false,//点击修改的字控制弹框显示与否
            editTxtData:{},//点击修改字时存放的数据变量
            cateList:[],//已进入页面获取的套餐类型存储的地方
            recommend_id:'',//复制首选、二推、三推的推荐语和套餐的编辑内容
            itemNull:[{item_name:'',average_capacity:'',plus_capacity:''}],//man里item没有数据时需要造一条假数据
        }
    },
    components:{
        goodsBox:goodslist
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.rcatelist,{},function(res){
            that.total = res.data.length
            that.tableData =  res.data;
        });//列表 
        abc.get(that,potUrl.categoryList,{},function(res){
            that.cateList= res.data
        })
        
    },
    created(){
        var that = this;       
        that.limitList = [
            {name:'修改',url:'edit'},
            {name:'复制',url:'copy'}
        ]     
    },
    methods:{ 
        theClick(b,a){
            // list表格中的操作cnp
            let that = this; 
            console.log(b,a)
            if(a == 'edit'){
                //点击的是修改字的事件；
                that.editTxt_if_show = true;
                abc.get(that,potUrl.rcaterinfo,{recommend_id:b.recommend_id},function(res){                  
                    // that.trList = res.data;//赋值给编辑的数据；
                    console.log(res)
                    that.editTxtData = res.data
                                
                })
            }else{
                that.recommend_id = b.recommend_id;
                that.$message('已经复制了，去YOU需要粘贴的地方粘贴吧~')
            }
        },
        editTxt_ifShowFn_yes(){
            var that = this;
            var sendData={};
            sendData.recommend_id = that.editTxtData.recommend_id;
            sendData.title = that.editTxtData.title;
            sendData.rcates = [];
            that.editTxtData.rcate_list.map((item)=>{
                let a={};
                a.category_id = item.category_id;
                a.intro = item.intro;
                a.man = item.man;
                a.woman = item.woman;
                a.sort = item.sort;
                sendData.rcates.push(a)
            })
            sendData.rcates = JSON.stringify(sendData.rcates)
            abc.post(that,potUrl.rcaterdone,sendData,function(res) {
                that.editTxt_if_show = false;

            })
        },
        theClicklevel(b){
            // 点击编辑小图标=====套餐的编辑icon
            let that = this; 
            abc.get(that,potUrl.rcatecinfo,{rcate_id:b},function(res){                  
                // that.trList = res.data;//赋值给编辑的数据；
               
                res.data.combos.map((item,c)=>{
                    if(item.man.items.length == 0){
                        item.man.items = that.itemNull
                    }
                    if(item.woman.items.length == 0){
                        item.woman.items = that.itemNull
                    }
                    
                })
                that.editiconInfo = res.data; 
                console.log(that.editiconInfo)
                that.editicon_show = true
                                 
            })  
        },
        changePage(val){
            //翻页
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           abc.getList(that,potUrl.itemList,that.form);
        },
        eiditiconyes(a){
            //添加时的确定按钮操作；
            let that = this;
            var arr = [],editiconObj={};
            editiconObj.rcate_id = that.editiconInfo.rcate_id;
            $.each(that.editiconInfo.combos,function(e,eitem) {
                //sales_num  praise_rate
                $.each(eitem.man.items,function(m,mitem) {
                    var obj = {}
                    obj.sex = '2';
                    obj.item_id = mitem.item_id
                    obj.average_capacity = mitem.average_capacity
                    obj.plus_capacity = mitem.plus_capacity
                    obj.level = e+1;
                    obj.sort = m+1;
                    obj.sales_num = eitem.man.sales_num;
                    obj.praise_rate = eitem.man.praise_rate
                    arr.push(obj)
                })
                $.each(eitem.woman.items,function(m,mitem) {
                    var obj1={}
                    obj1.sex = '1';
                    obj1.item_id = mitem.item_id
                    obj1.average_capacity = mitem.average_capacity
                    obj1.plus_capacity = mitem.plus_capacity
                    obj1.level = e+1
                    obj1.sort = m+1;
                    obj1.sales_num = eitem.man.sales_num;
                    obj1.praise_rate = eitem.man.praise_rate
                    arr.push(obj1)
                })
                
            })
            editiconObj.items = JSON.stringify(arr); 
            abc.post(that,potUrl.rcatecdone,editiconObj,function(res){
                that.add_edit_show = false;
                abc.get(that,potUrl.rcatelist,{},function(res){
                    that.total = res.data.length
                    that.tableData =  res.data;
                });//列表 
            })
            
        },
        addtr(){
            // 弹框内的+
            var that= this;
            if(that.trList.length>=5){
                that.$message('不能超过五条哟~')
                return
            }
            var tritemObj = {};
            tritemObj.item_id = ''
            tritemObj.item_name = ''
            tritemObj.average_capacity = ''
            tritemObj.plus_capacity = ''
            tritemObj.combo_item_price = '';
            that.trList.push(tritemObj)
        },
        delli(t){
            //删除某一条数据
            var that = this;
            that.trList.splice(t,1)            
        },
        getitemid(data,e){
            var that = this;  
            that.trList[data.tritemindex].item_id = data.item_id        
            that.trList[data.tritemindex].item_name = data.item_name         
        },
        paste(){
            // 三级套餐粘贴按钮
            let that = this; 
             
            abc.get(that,potUrl.rcatecinfo,{rcate_id:that.rcate_id},function(res){                  
                // that.trList = res.data;//赋值给编辑的数据；
                that.editiconInfo = res.data
                that.editicon_show = true
                                 
            })  
        },
        pasteTxt(){
            let that = this;
            abc.get(that,potUrl.rcaterinfo,{recommend_id:that.recommend_id},function(res){                  
                // that.trList = res.data;//赋值给编辑的数据；
                console.log(res)
                that.editTxtData = res.data
                            
            })
        },
        itemname(data){
            // 搜索商品组件返回的数据
            var r = data.tritemindex.split('-')[0];
            var m = data.tritemindex.split('-')[1];
            var wm = data.tritemindex.split('-')[2];
            if(wm == 'man'){
                this.editiconInfo.combos[r].man.items[m].item_id = data.item_id
                this.editiconInfo.combos[r].man.items[m].item_name = data.item_name
            }else{
                this.editiconInfo.combos[r].woman.items[m].item_id = data.item_id
                this.editiconInfo.combos[r].woman.items[m].item_name = data.item_name
            }
        },
        updown(a,b){
            var that = this;
            var r = a.split('-')[0];
            var m = a.split('-')[1];
            var wm = a.split('-')[2];
            var arr = []
            if(wm == 'man'){
                arr = that.editiconInfo.combos[r].man.items
            }else{
                arr = that.editiconInfo.combos[r].woman.items
            }
            switch (b) {
                case 'up':                   
                    if(m == 0){
                        return
                    }else{
                       console.log(arr)  
                       arr.splice(m-1,0,arr.splice(m,1)[0])
                       console.log(arr)  
                    }
                    break;
                case 'down':
                    if(m == (arr.length-1)){
                        return
                    }else{
                       arr.splice(m+1,0,arr.splice(m,1)[0])  
                    }
                    break;
                case 'minus':
                    if(arr.length == 1){
                        that.$message('至少有一件商品~')
                    }else{
                        arr.splice(m,1)
                    }
                    break;
                case 'plus':
                    if(arr.length >= 2){
                        that.$message('不能超过2件商品~')
                    }else{
                        var obj = {};
                        obj.item_name = '';
                        obj.average_capacity = '';
                        obj.plus_capacity = ''
                        arr.push(obj)
                    }
                    break;
                default:
                    break;
            }
            if(wm == 'man'){
                that.editiconInfo.combos[r].man.items = arr
            }else{
                that.editiconInfo.combos[r].woman.items = arr
            }
            that.$forceUpdate()
        }

    }
}

</script>